<!--课程考核成绩审核-->
<template>
  <div class="wrapper-container">
    <div class="search-container" style="margin:0">
      <div class="search-container-item">
        <span>学期：</span>
        <el-select
          v-model="xueqi"
          size="mini"
          clearable
          style="width: 88px"
          placeholder="请选择"
        >
        <!-- @clear="Tjkcqueryallscore" -->
          <el-option
            v-for="item in xqList"
            :key="item.xqmc"
            :label="item.xqmc"
            :value="item.xqmc"
          >
          </el-option>
        </el-select>
      </div>
      <div class="search-container-item">
        <span>课程负责单位：</span>
        <el-select
          v-model="xb"
          style="width: 110px;margin-right:5px"
          size="mini"
          placeholder="请选择"
          @change="handleXb"
          clearable
        >
          <el-option
            style="margin-right:5px"
            v-for="(item,index) in xbList"
            :key="index"
            :label="item.deptName"
            :value="item.deptName"
          >
          </el-option>
        </el-select>
        <el-select
          v-model="gClass"
          style="width: 90px"
          size="mini"
          placeholder="请选择"
          @change="handleClass"
          clearable
        >
          <el-option
            v-for="(item,index) in gClassList"
            :key="index"
            :label="item.deptName ? item.deptName : item.value"
            :value="item.deptName ? item.deptName : item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div class="search-container-item">
        <span>培养层次：</span>
        <el-select
            v-model="eduLevel"
            size="mini"
            style="width: 83px"
            placeholder="请选择"
            clearable
          >
          <el-option
            v-for="item in levelList"
            :key="item.dictKey"
            :label="item.dictValue"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </div>
      <div class="search-container-item">
        <span>修习类型：</span>
        <el-select
          v-model="studytype"
          style="width: 83px"
          size="mini"
          placeholder="请选择"
          clearable
        >
          <el-option
            v-for="item in xxlxList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div class="search-container-item">
        <span>课程名称：</span>
        <el-input
          style="width: 98px"
          size="mini"
          placeholder="授课教员"
          v-model="teachingfaculty"
          clearable
        ></el-input>
      </div>
      <div class="search-container-item">
        <span>课程名称：</span>
        <el-input
          style="width: 98px"
          size="mini"
          placeholder="课程名称"
          v-model="coursename"
          clearable
        ></el-input>
      </div>
      <SelectItem
        :name="'分项类型'"
        :multipleFlag="true"
        :multipleValue="itemType"
        @change="
          (e) => {
            itemType = e;
          }
        "
        :xqList="itemTypeList"
      ></SelectItem>
      <div style="margin: 3px;">
      <el-checkbox v-model="checked" @change="dshLook(val)">只看待审核</el-checkbox></div>
      <div class="search-button" style="margin:2px 0 0 0" @click="queryscore">
        <img src="../../../assets/assessment/icon-search.png" alt=""/>
        <span>查询</span>
      </div>
    </div>
    <div class="table-container">
      <el-table
        :data="tableData"
        border
        style="width: 100%;border:1px solid rgb(0 76 167)"
        class="xpaas-table-class"
        row-class-name="xpaas-row-class"
        cell-class-name="xpaas-cell-class"
        header-row-class-name="xpaas-header-row-class"
        header-cell-class-name="xpaas-header-cell-class"
      >
        <el-table-column prop="termid" label="学期" align="center">
        </el-table-column>
        <el-table-column prop="teachingandresearchsection" label="教研室" align="center">
        </el-table-column>
        <el-table-column
          width="200"
          prop="coursename"
          label="课程编号"
          align="center"
        >
          <template slot="header" slot-scope="scope">
            课程编号<br/>
            【课程名称】
          </template>
          <template slot-scope="scope">
            {{ scope.row.coursenumber }}<br/>
          【{{ scope.row.coursename }}】
          </template>
        </el-table-column>
        <el-table-column prop="professionaldivisions" label="教学班" align="center">
        </el-table-column>
        <el-table-column prop="teachingfaculty" label="授课教员" align="center">
        </el-table-column>
        <el-table-column prop="shouldrecord" label="应录" align="center">
        </el-table-column>

        <el-table-column
          v-for="item in itemTypeLoop"
          :key="item.toString()"
          :prop="item"
          width="180"
          align="center"
        >
          <template slot="header" slot-scope="scope">
            {{ itemTypeObject[item] }}<br/>
            (未录/已录/已审)
          </template>
          <template slot-scope="scope">
            <Subscript
              v-if="
                !scope.row[item] &&
                (scope.row[item + '1'] || scope.row[item + '2'])
              "
              :className="
                scope.row[item + '2'] > 0 ? 'oclock' : 'check'
              "
            ></Subscript>
            <span
              v-if="
                !scope.row[item] &&
                (scope.row[item + '1'] || scope.row[item + '2'])
              "
              :style="{
                color:
                  scope.row[item + '2'] > 0 ? 'red' : '#004ca7',
              }"
            >{{
                scope.row[item + "1"] +
                "/" +
                scope.row[item + "2"] +
                "/" +
                scope.row[item + "3"]
              }}</span
            >
            <span v-if="scope.row[item]">/</span>
          </template>
        </el-table-column>
        <el-table-column prop="courseName" label="审核成绩" align="center">
          <template slot-scope="scope">
            <ButtonItem
              @click="toquerystudent(scope.row.planid)"
              style="margin: 0 auto"
              :name="'审核'"
              :link="''"
              :icon="'el-icon-s-check'"
              :buttonColor="'green'"
            ></ButtonItem>
          </template>
        </el-table-column>
      </el-table>
      <div class="block" style="margin-bottom: 50px;position:relative">
        <div class="bottom-block" style="position: absolute;top: 10px;left: 40%;">
          <div class="text">授课教员名字后加“*”为课程负责人</div>
        </div>
        <el-pagination
          style="width:auto;margin-top: 15px;float:right;margin-bottom:50px;padding:0"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNo"
          :page-sizes="[5, 10, 20, 30,50,100,200]"
          :page-size="5"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.length > 0 ? tableData[0].tol : ''"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import SelectItem from "../../../components/SelectItem.vue";
import InputItem from "../../../components/InputItem.vue";
import ButtonItem from "../../../components/ButtonItem.vue";
import Subscript from "../../../components/Subscript.vue";
import { queryscore,reqGetXqList,reqCheckLevelList  } from "@/api/admin1/check";
import { getxb,getClass,queryXBclassroom } from "@/api/course/courses";

export default {
  components: {
    SelectItem,
    InputItem,
    ButtonItem,
    Subscript,
  },
  data() {
    return {
      pageNo:1,
      pageSize:5,
      checked: false,
      planid: '',
      termid: "",
      xqList: [],
      xueqi:"",
      xb:"",
      gClass:"",
      xbList:[],
      gClassList:[],
      pc: "",
      pcList: [],
      designcontent: "",
      unitList: [],
      itemType: ["value1"],
      itemTypeList: [
        {
          value: "value1",
          label: "课下作业",
        },
        {
          value: "value2",
          label: "课堂测评",
        },
        {
          value: "value3",
          label: "期中考试",
        },
        {
          value: "value4",
          label: "课终考核",
        },
      ],
      itemTypeObject: {
        value1: "课下作业",
        value2: "课堂测评",
        value3: "期中考试",
        value4: "课终考核",
      },
      eduLevel: "",
      levelList: [],
      studytype: "",
      xxlxList: [
        {
          value: "必修",
          label: "必修",
        },
        {
          value: "选修",
          label: "选修",
        },
      ],
      typeList: [],
      teachingfaculty: "",
      coursename: "",
      dsh:"",
      tableData: [],
      multipleSelection: [],
    };
  },
  mounted() {
    this.termAll();
    this.xbAll();
    this.classAll();
    this.getLevelList();
    this.queryscore()
  },
  methods: {
    handleCurrentChange(val) {
      this.pageNo = val;
      this.queryscore();
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.queryscore();
    },
    //获取学期列表
    async termAll() {
      const result = await reqGetXqList();
      if (result.data.code == 200) {
        this.xqList = result.data.data;
      }
    },
    //获取系部
    async xbAll(){
      const xb = await getxb();
      xb.data.code == 200 ? this.xbList = xb.data.data : [];
    },
    async classAll(){
      const gClass = await getClass();
      gClass.data.code == 200 ? this.gClassList = gClass.data.data : [];
    },
    // 教研室下拉框的改变
    handleClass(val){
      if(!val){
        this.xb ? this.handleXb(this.xb)  : this.classAll();
      }
    },
    // 根据系部选中获取教研室
    async handleXb(val){
      if(val){
        const xbClass = await queryXBclassroom(val);
        xbClass.data.code == 200 ? this.gClassList = xbClass.data.data : [];
        this.gClass = ''
      } else {
        this.xbAll();
        this.classAll();
      }
    },
    // 获取培养层次下拉框
    async getLevelList() {
      const result = await reqCheckLevelList('pylevel');
      result.data.code == 200 ? this.levelList = result.data.data[0].children : [];
    },
    //  按条件查询
    queryscore() {
      let obj = {
        termid: this.xueqi,
        department:this.xb,
        teachingandresearchsection:this.gClass,
        // designcontent: this.designcontent,
        traininglevel: this.eduLevel,
        studytype: this.studytype,
        teachingfaculty: this.teachingfaculty,
        coursename: this.coursename,
        dsh:this.dsh,
        pageNo:this.pageNo,
        pageSize:this.pageSize
      }
      return new Promise(() => {
        queryscore(obj).then(res => {
          if (res.data.code == 200) {
            this.tableData = res.data.data;
            // this.pageNo = 1;
            let data = res.data.data;
            let obj = new Object();
            for (const dataKey in data) {
              let ktworkList = data[dataKey].ktwork.split('/')
              for (const ktworkListKey in ktworkList) {
                obj["value1" + (parseInt(ktworkListKey) + 1)] = ktworkList[ktworkListKey]
              }
              let ktreviewList = data[dataKey].ktreview.split('/')
              for (const ktreviewListKey in ktreviewList) {
                obj["value2" + (parseInt(ktreviewListKey) + 1)] = ktreviewList[ktreviewListKey]
              }
              let qzreviewList = data[dataKey].qzreview.split('/')
              for (const qzreviewListKey in qzreviewList) {
                obj["value3" + (parseInt(qzreviewListKey) + 1)] = qzreviewList[qzreviewListKey]
              }
              let kzreviewList = data[dataKey].qzreview.split('/')
              for (const kzreviewListKey in kzreviewList) {
                obj["value4" + (parseInt(kzreviewListKey) + 1)] = kzreviewList[kzreviewListKey]
              }
              this.tableData[dataKey] = {...obj, ...this.tableData[dataKey]}
              console.log(this.tableData)
            }
          }
        })
      })
    },
    dshLook(){
      if(this.checked){
        this.dsh = '2';
        this.queryscore();
      } else {
        this.dsh = '';
        this.queryscore();
      }
    },

    toquerystudent(planid) {
      this.$router.push({
        path: '/admin/examination/checkCourseScore',
        query: { planid: planid, itemTypes: this.itemTypeLoop.toString() },
      })
    }

  },
  computed: {
    itemTypeLoop() {
      console.log(this.itemType)
      return this.itemType.sort();
      //期中考试（已录/已审
      // qzreview ;
    },
  },
};
</script>
<style lang="less" scoped>
.search-container {
  justify-content: flex-start !important;
}

.search-button {
  cursor: pointer;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 27px;
  background: #f1f8fe;
  border: 1px solid #51aef6;
  border-radius: 6px;

  > span {
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #51aef6;
  }

  > img {
    width: 19px;
    height: 19px;
    margin-right: 4px;
  }
}

.table-container {
  margin-top: 15px;

  .el-table td,
  .el-table th.is-leaf,
  .el-table--border,
  .el-table--group {
    border-color: #c7d7eb;
  }

  .el-table__header tr,
  .el-table__header th {
    padding: 0;
    height: 76px;
    background-color: #edf2f9;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    line-height: 20px;
    color: #004ca7;
  }

  .el-table__body tr,
  .el-table__body td {
    padding: 0;
    height: 86px;
  }

  .wrapper-button {
    display: flex;
    flex-direction: column;
    align-items: center;

    > div {
      margin-bottom: 8px;
    }
  }
}
</style>

<style lang="less" scoped>
@import "../../../styles/special.less";
.search-container-item {
  margin: 0 15px 0 0;
  color: #004ca7;
}
.bottom-block {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;

  .text {
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    line-height: 39px;
    color: #004ca7;
  }
}

.table-container5 {
  display: flex;

  .table-data:first-child {
    border-right: none !important;
    border-radius: 9px 0px 0px 9px;
  }

  .table-data:last-child {
    border-radius: 0px 9px 9px 0px;
    border-left: 1px solid #c7d7eb !important;
  }

  .table-data:not(:first-child):not(:last-child) {
    border-right: none !important;
    border-left: 0.8px solid #c7d7eb !important;
    border-radius: 0px !important;
  }

  .table-data {
    min-height: 500px;
  }
}

.table-container ::v-deep .el-table--border .el-table__cell:first-child .cell {
  padding-left: 10px !important;
}

.filter-button1::v-deep .el-radio-button .el-radio-button__inner {
  border-radius: 6px !important;
  border: 1px solid rgb(245, 134, 106);
  color: rgb(245, 134, 106);
  background-color: rgb(254, 237, 226);
}

.filter-button1::v-deep
.el-radio-button__orig-radio:checked
+ .el-radio-button__inner {
  border: 1px solid rgb(245, 134, 106);
  color: white;
  background-color: rgb(245, 134, 106);
}

.filter-button {
  display: flex;
  margin-top: 27px;
}

.wrapper-container {
  width: 100%;
  margin: 0;
}

.table-container2 {
  .table-data {
    min-height: 500px;
  }

  display: flex;
  justify-content: space-between;
  align-items: center;
}

.table-container {
  margin-top: 15px;

  .table-data {
    width: 100%;
    border: 0.8px solid #004ca7;
    border-radius: 9px;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #004ca7;
  }
}

.save-button {
  width: 87px;
  height: 36px;
  line-height: 36px;
  background: #fff6ef;
  border: 1px solid #f3b815;
  border-radius: 6px;
  font-size: 18px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #f3b815;
  text-align: center;
  margin: 82px auto;
}

.zuoyou {
  width: 200px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
@fontFamily:"Microsoft YaHei";
.xpaas-table-class {
  border: 1px solid #004ca7;
  border-radius: 9px;
  > ::v-deep div.el-table__header-wrapper {
    > table.el-table__header {
      > thead {
        > tr.xpaas-header-row-class {
          padding: 0;
          height: 76px;
          background-color: #edf2f9;
          font-size: 16px;
          font-family: Microsoft YaHei;
          font-weight: bold;
          line-height: 20px;
          color: #004ca7;
          > th.xpaas-header-cell-class {
            font-weight: bold;
            border-right: 1px solid #c7d7eb;
            border-left: 0;
            border-bottom: 1px solid #c7d7eb;
            background-color: #edf2f9;
            > div.cell {
              font-size: 16px;
              font-weight: bold;
              font-family: @fontFamily;
              color: #004ca7;
            }
          }
        }
      }
    }
  }
  > ::v-deep div.el-table__body-wrapper {
    > table.el-table__body {
      > tbody {
        > tr.xpaas-row-class {
          > td.xpaas-header-cell-class {
            border-right: 1px solid #c7d7eb;
            border-left: 0;
            border-bottom: 1px solid #c7d7eb;
            background-color: #edf2f9;
            > div.cell {
              font-size: 16px;
              font-weight: bold;
              font-family: @fontFamily;
              color: #004ca7;
            }
          }
          > td.xpaas-cell-class {
            height: 76px;
            
            border-right: 1px solid #c7d7eb;
            border-left: 0;
            border-bottom: 1px solid #c7d7eb;
            > div.cell {
              font-weight: normal;
              font-family: @fontFamily;
              color: #004ca7;
            }
          }
        }
      }
    }
  }
}
</style>
